<template>
	<view class="homeContainer">
		
<view class="header">
	<!-- 头部logo区域 -->
	<view class="topHeader">
		<view class="headerLogo">
			<image class="logo" src="../../static/images/logo.png" ></image>
		</view>
		
	</view>
	<!-- 搜索框区域 -->
	<scroll-view class="searchBar" enable-flex scroll-y="true" @scroll="scroll"  >
		<view class="innerBar">
			<image class="search iconfont icon-sousuo"></image>
			<text class="content">请输入搜索关键字</text>
		</view>
	</scroll-view>
	
	<!-- 轮播区域 -->
	<swiper class="bannerSwiper" indicator-dots="true" autoplay="true" >
		<swiper-item class="swiperItem" v-for="(banner,index) in bannerList" :key="banner.uuid" >
			<image class="swiperImg" :src="banner.src" ></image>
		</swiper-item>
	</swiper>
	
</view>
	<!-- 手机推荐区域 -->
	<view class="phone">
		<view class="big" v-for="(bigPhone,index) in phoneBigImg" :key="bigPhone.uuid" >
			<image class="bigImg" :src="bigPhone.src" ></image>
		</view>
		<view class="phoneCate1" >
			<image class="cate1Img" v-for="(p1,index) in phoneList1" :key="p1.uuid"   :src="p1.src"></image>
		</view>
		<view class="phoneCate2">
			<image class="cate2Img" v-for="(p2,index) in phoneList2" :key="p2.uuid" :src="p2.src"></image>
		</view>
	</view>
	
	<!-- 电脑推荐区域 -->
	<view class="computer">
		<view class="big">
			<image v-for="(com,index) in computerBigImg" :key="com.uuid" 
			 class="bigImg" :src="com.src" ></image>
		</view>
		<view class="computerCate1">
			<image v-for="(com1,index) in computerList1" :key="com1.uuid" class="cate1Img" 
			:src="com1.src"></image>
		</view>
		<view class="computerCate2">
			<image v-for="(com2,index) in computerList2" :key="com2.uuid" class="cate2Img"
			:src="com2.src"></image>
		</view>
	</view>
	
	<!-- 配件推荐区域 -->
	<view class="parts">
		<view class="big">
			<image v-for="(parts,index) in partsBigImg" :key="parts.uuid"  class="bigImg" 
			:src="parts.src" ></image>
		</view>
		<view class="partsCate1">
			<image v-for="(parts1,index) in partsList1" :key="parts1.uuid"  class="cate1Img"
			:src="parts1.src" ></image>
		
		</view>
		<view class="partsCate2">
			<image v-for="(parts2,index) in partsList2" :key="parts2.uuid"  class="cate2Img"
			:src="parts2.src" ></image>
		</view>
	</view>
	
	<!-- 更多商品 -->
	<view class="moreGoods">
		<view class="title">更多商品</view>
		<view class="goodsList">
			<!-- 瀑布流左侧布局 -->
			<view class="goodsLeft">
				<view class="leftItem" v-for="(item,index) in skuList" :key="index" 
				  v-if="index % 2 === 0"
				 >
					<image class="leftImg" :src="item.images" ></image>
					<view class="content">
						{{item.skuName}}
					</view>
					<view class="price">
						¥{{item.originalPrice}}
					</view>
				</view>
			</view>
				<!-- 瀑布流右侧布局 -->
				<view class="goodsRight">
					<view class="rightItem" v-if="index % 2 !== 0"  v-for="(item,index) in skuList" :key="index"  >
						<image class="rightImg" :src="item.images" ></image>	
						<view class="content">
							{{item.skuName}}
						</view>
						<view class="price">
							¥{{item.originalPrice}}
						</view>
					</view>
					
					
				</view>
				
				<!-- 小箭头向上位置 -->
				<scroll-view scroll-y="true"  class="dotWrap" enable-flex @scroll="dotPosition(e)"  >
					<view class="dotText"> ^ </view>
				</scroll-view>						
		</view>

		
	</view>
	 

	</view>
</template>

<script>
	import {mapGetters,mapState} from 'vuex'
	export default {
		data() {
			return {
				position:'absolute',
				scrollTop:0
			}
		},
				
		
		mounted() {
			this.getHomeDataList(),
			this.getSkuList()
		},
		methods: {
  getHomeDataList(){
	this.$store.dispatch('home/getHomeDataList')

  },
	getSkuList(){
		this.$store.dispatch('home/getSkuList')
	},
	scroll(event){
		console.log(event.detail)
	},
	dotPosition(e){
		console.log(e)
	}
	
		},
		computed:{
			...mapGetters('home',['bannerList','phoneBigImg',
			'phoneList1','phoneList2','computerBigImg','computerList1',
			'computerList2','partsBigImg','partsList1','partsList2']),
			...mapState('home',['skuList'])
		}
	}
</script>

<style lang="stylus" >
	// .searchBar.fixed
	// 	// position: -webkit-sticky
	// 	postion:fixed
	// 	top: 0upx
	// 	border-bottom: 2upx solid rgba(0,0,0,.08)
	// 	box-sizing: border-box
	// 	box-shadow: 0 5.33px 13.33px rgb(0 0 0 / 8%)
	// 	background: #fff
.homeContainer
	.header
		position: relative
		height: 450upx
		.topHeader
			.headerLogo
				display: flex
				justify-content: center
				align-items: center
				position: absolute
				z-index: 2
				left: 50%
				transform: translateX(-50%)
				.logo
					width:50upx
					height: 50upx
					margin: 20upx 0
					
		.searchBar
			position: absolute
			top: 90upx
			left:0
			right: 0
			bottom: 0
			z-index: 20
			height: 100upx
			padding: 0 20upx		
			box-sizing: border-box
		
			.innerBar
				position: relative
				background: hsla(0,0%,100%,.98)
				border-radius: 10upx
				height: 64upx
				line-height: 42upx
				padding: 0 10upx
				.icon-sousuo
					position: absolute
					top: 20%
					width: 46upx
					height: 46upx
					vertical-align: middle
				.content
					position: absolute
					top: 20%
					padding-left: 60upx
					font-size: 30upx
					font-weight: 700;
					color:rgba(0,0,0,.15)
		.bannerSwiper
			position: absolute
			height: 450upx
			width: 100%
			z-index: 1
			top: 0
			.swiperItem
				.swiperImg
					width: 100%
					height: 450upx
	.phone
		.big
			.bigImg
				width: 100%
				height: 300upx
				vertical-align: middle
		.phoneCate1
			width: 100%
			
			.cate1Img
				width: 50%
				height: 250upx
				vertical-align: middle
		.phoneCate2
			.cate2Img
				width: 50%
				height: 250upx
				vertical-align: middle
	.computer
		.big
			.bigImg
				width: 100%
				height: 300upx
				vertical-align: middle
		.computerCate1
			.cate1Img
				width: 50%
				height: 250upx
				vertical-align: middle
		.computerCate2
			.cate2Img
				width: 50%
				height: 250upx
				vertical-align: middle
	.parts
		.big
			.bigImg
				width: 100%
				height: 300upx
				vertical-align: middle
		.partsCate1
			.cate1Img
				width: 50%
				height: 250upx
				vertical-align: middle
		.partsCate2
			.cate2Img
				width: 50%
				height: 250upx
				vertical-align: middle
				
	.moreGoods
		.title
			width: 100%
			padding: 0 50upx
			height: 75upx
			line-height: 75upx
			font-size: 34upx
			font-weight: bold
			color: #666
		.goodsList
			position: relative
			display: flex
			flex-direction: row
			padding: 0 20upx
			.goodsLeft
				position: relative
				width: 50%
				display: flex
				flex-direction: column
				.leftItem
					position: relative
					margin-bottom: 10upx
					border-radius: 20upx
					&::after
						position: absolute;
						content: "";
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background: rgba(0,0,0,.02);
					.leftImg
						width: 340upx
						height: 340upx
					.content
						margin-top: 10upx
						font-size: 30upx
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;   /** 多行文本溢出...*/
						overflow: hidden; 	
					.price
						height: 80upx
						line-height: 80upx
						font-size: 28upx
						color: #d44d44
				
			.goodsRight
				width: 50%
				margin-left: 10upx
				display: flex
				flex-direction: column
				.rightItem
					position: relative
					margin-bottom: 10upx
					border-radius: 20upx
					&::after
						position: absolute;
						content: "";
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background: rgba(0,0,0,.02);
					.rightImg
						width: 340upx
						height: 340upx
					.content
						margin-top: 10upx
						font-size: 28upx
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;   /** 多行文本溢出...*/
						overflow: hidden; 
					.price
						height: 80upx
						line-height: 80upx
						font-size: 30upx
						color: #d44d44
			.dotWrap
				position: fixed
				bottom: 30upx
				right: 30upx
				width: 110upx
				height: 110upx
				background-color: #fff
				border-radius: 20upx
				.dotText
					font-size: 50upx
					color: #aaa
					line-height: 110upx
					text-align: center
			
	

</style>
	
		